<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.0.js"></script>
</head>
<style>
    .box{
        width: 1000px;
        height: 500px;
        margin: 20px 0 0 150px;
        border: 1px solid #000;
        /* background-color: pink; */
        position: relative;
    }
    #result{
        display: none;
    }
    .player{
        width: 500px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
    }
    .playerB{
        width: 600px;
        height: 100px;
        background-color: pink;
        position: absolute;
    }
    .wanjiaA{
        bottom: 0;
        left: 200px;
    }
    .wanjiaB{
        right:0PX;
        bottom: 120px;
        background-color: #6a6da9;
    }
    .wanjiaC{
        left: 200PX;
        top: 0px;
        background-color: #b2d235;
    }
    .wanjiaD{
        left: 0;
        top: 150px;
    }
    .btn-fapai{
        width: 100px;
        height: 40px;
        background-color: skyblue;
        color:#fff;
        margin: 20px 0 0 580px;
    }


</style>
<body>
    <!-- <div>测试<span id="printCount"></span>次</div> -->

    <div id="result" ></div>

    <button class="btn-fapai" id="btn">点击发牌</button>

    <div class="box">
        <div class="player wanjiaC">
            <span>玩家C</span><br>
            <span id="pc"></span>
        </div>
        <div class="playerB wanjiaD">
            <span>玩家D</span><br>
            <span id="pd"></span>
        </div>
        <div class="player wanjiaA">
            <span>玩家A</span><br>
            <span id="pa"></span>
        </div>
        <div class="playerB wanjiaB">
            <span>玩家B</span><br>
            <span id="pb"></span>
        </div>
    </div>
</body>
<script>
var cardMap = ['A','2','3','4','5','6','7','8','9','十','J','Q','K'];
var leper = '王';
var count = 0; // 切牌次数,切得却多牌越稀烂
var mode = [7, 7, 7, 7];  // 发牌mode  每次发牌多少张，可以自定义发牌轮数mode.length
var printCount = 100; // 在页面打印发牌次数
var modeLeper = [ // 全部癞子组合mode
    [1, 7],
    [2, 6],
    [3, 5],
    [4, 4],
    [1, 1, 6],
    [1, 2, 5],
    [1, 3, 4],
    [2, 2, 4],
    [2, 3, 3],
    [2, 2, 2, 2],
    [1, 1, 1, 5],
    [1, 1, 2, 4],
    [1, 1, 3, 3],
    [1, 2, 2, 3],
    [0, 0, 0, 8]
];
var luckyDifficulty = 3;
function createCard(card, num) {
    var list = [];
    for (var i = 0; i < num; i++) {
        list.push(card);
    }
    return list
}
// 创建一副牌
function createAllCard () {
    var list = [];
    // var m_cardMap = cardMap.sort(() => (0.5 - Math.random()));
    cardMap.forEach(item => {
        var arr = [];
        for (var i = 0; i < 8; i++) {
            arr[i] = item;
        }
        list.push(arr.join(''));
    })
    // 开始生产癞子
    var leperMode = [];
    var ordinary = Math.floor(Math.random() * modeLeper.length); // 0-14
    var lucky = Math.floor(Math.random() * luckyDifficulty); // 0-5
    if (ordinary === 9 && lucky === 0) {
        leperMode = modeLeper[modeLeper.length - 1];
    } else {
        leperMode = modeLeper[ordinary];
    }
    var leperGroup = [];
    leperMode.forEach(v => {
        if (v > 0) {
            leperGroup.push(createCard('王', v).join(''));
        }
    })
    list = list.concat(leperGroup);
    list = list.sort(() => (0.5 - Math.random()));
    return list.join('').split('');
}
/**
 * 切牌函数  list传入牌集合  n切牌次数
*/

function qiePai (list, n) {
    var nList = new Array(n);
    var m_list = [ ...list ]; 
    for (var i = 0; i < n; i++) {
        var random = Math.floor(Math.random()*100);
        var listStr = m_list.join('');
        var newListStr = '';
        var next = listStr.substr(random, listStr.length - 1);
        var prev =listStr.substr(0, random);
        newListStr = next + prev;
        m_list = newListStr.split('');
    }
    return m_list;
}
/**
 * 发牌函数
*/
function faPai () {
    var m_list = createAllCard();
    m_list = qiePai(m_list, count); // 切牌
    var a = [];
    var b = [];
    var c = [];
    var d = [];
    mode.forEach((v, i) => { // 发牌开始
        // v是每一轮发牌的数量
        a = a.concat(m_list.splice(0, v));
        b = b.concat(m_list.splice(0, v));
        c = c.concat(m_list.splice(0, v));
        d = d.concat(m_list.splice(0, v));
    })
    var playerMap = {
        a: a.join(''),
        b: b.join(''),
        c: c.join(''),
        d: d.join('')
    }
    return playerMap;
}

// var printCountWrap = document.getElementById('printCount');
// var resultWrap = document.getElementById('result');
// printCountWrap.innerHTML = printCount;
// for (var i =0; i < printCount; i ++) {
//     var result = faPai();
//     var resultHtml = '';    
//     var oDiv = document.createElement('div');
//     resultHtml += '<hr>' + result.a +'</br>' + result.b + '</br>' + result.c + '</br>' + result.d;
//     oDiv.innerHTML = resultHtml
//     resultWrap.appendChild(oDiv);

// }
    $(function () { 
        $('#btn').click(function () {
            var result = faPai();
            console.log(result);
            $('#pa').text(result.a);
            $('#pb').text(result.b);
            $('#pc').text(result.c);
            $('#pd').text(result.d);
          });
    });
</script>
</html>